<template>
	<view class="wrap">
			<view class="">
				<view class="content">
					<view class="leftContent">
						<view class="amount">
							<view class="couponAmount">
								<text class="amount_unit">¥</text>
								<text class="realAmount">{{detailBean.money}}</text>
							</view>
									<text class="useInfo">满{{detailBean.conditionMoney}}元可用</text>
						</view>
						<view class="contentInfo">
							<text class="activity-name">{{detailBean.couponName}}</text>
							<text class="useTypeName" style="opacity: 0;">{{detailBean.useTypeName}}</text>
							<text class="time">{{detailBean.useTime}}</text>
							<view class="useType" @click="changeDesc">
								<text class="conponType">{{detailBean.applicableUnit}}</text>
								<image class="arrow" src="../../static/coupon/coupon_up.png" mode=""></image>
							</view>
							
						</view>
						
					</view>
					<view class="rightContent">
						<text class="conponType1">{{detailBean.businessName}}</text>
					</view>
				</view>
				
				<view class="coupon_bg">
					<view class="dashline">
						
					</view>
				</view>
				
				<!-- <image class="cover" :src="receivedBgUrl" mode="scaleToFill"></image> -->
				
				<view class="descWrap" v-if="isShowDesc">
					<text class="descTitle">使用说明: </text>
					<view class="descContent">
						<view class="desc1">
							1. {{detailBean.applicableUnitType == 1 ? '全场通用' : '部分门店可用'}} 
							<!-- <text class="desc2" @click="goStore">查看适用门店></text> -->
						</view>
						<view class="desc1 desc-item">
							2. {{filterNull(detailBean.useNotice)}}
						</view>
						<!-- <view class="desc1 desc-item">
							3.最终解释权归blablabla店所有
						</view> -->
						<!-- <view class="desc2 desc-item" v-if="useArea!=1" @click="goCar">
							查看指定车型>
						</view> -->
					</view>
					
					
				</view>
			</view>
			
			
			
			
			<image class="qrcode" :src="qrpath" mode="scaleToFill" @click="redeemCodeShow = true"></image>
			
			<text style="font-size: 26upx;color: #666;margin-top: 23upx;">{{codeStr}}</text>
			<text style="font-size: 28upx;color: #333;margin-top: 55upx;font-weight: bold;">请到店出示二维码进行消费</text>
			
			<u-popup :show="redeemCodeShow" mode="center" @close="redeemCodeShow=false" :closeable="true" round="10">
				<view class="codeBg">
					
					<image class="qrcode_pop" :src="qrpath" mode="scaleToFill"></image>
					<text style="font-size: 28upx;color: #666;margin-top: 18upx;">{{codeStr}}</text>
					<text style="font-size: 30upx;color: #333;margin-top: 30upx;font-weight: bold;">请到店出示二维码进行消费</text>
				</view>
			</u-popup>
	</view>
</template>

<script>
	import {coupongenerate} from '@/common/api.js';
	
	export default {
		data() {
			return {
				detailBean:{},
				receivedBgUrl: this.baseImageUrl+'uni_rental/使用优惠券背景@2x.png',
				isShowDesc: false,
				codeStr:'',
				qrpath:'',
				redeemCodeShow: false,
			}
		},
		methods: {
			getData(){
				coupongenerate({
					businessId:this.detailBean.memberId,
					codeType:0
				}).then(res=>{
					this.codeStr = '('+res.code+')';
					this.qrpath = this.baseImageUrl+res.path;
				})
			},
			changeDesc() {
				this.isShowDesc = !this.isShowDesc;
			},
		},
		onLoad(op) {
			this.detailBean = op;
			console.log('接到了', this.detailBean);
			this.getData();
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		// position: relative;
		padding: 0upx 20upx;
		@include flex(column);
		align-items: center;
	}
	.cover {
		width: 706upx;
		height: 190upx;
		line-height: 190upx;
		
	}
	
	.coupon_bg{
		width: 706upx;
		height: 190upx;
		border-radius: 10upx;
		background-color: #fff;
		position: relative;
		z-index: -1;
		
		&::after{
			content: '';
			background-color: #F5F5F5;
			width: 30upx;
			height: 15upx;
			position: absolute;
			top: 0;
			border-radius:0 0 15upx 15upx;
			left: 230upx;
		}
		
		&::before{
			content: '';
			background-color: #F5F5F5;
			width: 30upx;
			height: 15upx;
			position: absolute;
			bottom: 0;
			border-radius:15upx 15upx 0 0;
			left: 230upx;
		}
		
		.dashline{
			width: 4upx;
			height: 160upx;
			position: absolute;
			top: 15upx;
			left: 243upx;
			
			background-image: linear-gradient(#EDEDED 35%, rgba(255,255,255,0) 0%);
			background-position: left;
			background-size: 4upx 20upx;
			background-repeat: repeat-y;
		}
		
	}
	
	.content {
		position: relative;
		display: flex;
		margin-top: 26upx;
		.leftContent {
			display: flex;
			position: absolute;
			top: 0;
			left: 22upx;
			justify-content: center;
			.amount {
				display: flex;
				width: 206upx;
				height: 190upx;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.couponAmount {
					display: flex;
					align-items: flex-start;
				}
			}
			.contentInfo {
				display: flex;
				flex-direction: column;
				width: 245upx;
				margin-left: 100upx;
		        margin-right: 10upx;
				.useType {
					display: flex;
					margin-top: 12upx;
					justify-content: space-between;
					align-items: center;
				}
			}
			
		}
		.rightContent {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			width: 240upx;
			position: absolute;
			top: 0;
			right: 0;
		}
		
	}
	
	.amount_unit {
		position: relative;
		top: 10upx;
		font-size: 21upx;
		color: #333;
		margin-right: 3upx;
		font-weight: bold;
		line-height: 1;
	}
	
	.realAmount {
		font-size: 67upx;
		font-weight: bold;
		font-family:  Eras Bold ITC, Eras Bold ITC-Regular;
		color: #333;
		text-align: center;
		line-height: 1;
		// letter-spacing: -11upx;
	}
	
	.useInfo {
		margin-top: 15upx;
		font-size: 21upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		color: #333;
	}
	
	.activity-name {
		margin-top: 45upx;
		color: #333;
		font-size: 20upx;
		font-weight: bold;
		font-family: PingFang SC, PingFang SC-Bold;
	}
	
	
	.useTypeName {
		margin-top: 10upx;
		color: #666;
		font-size: 16upx;
	}
	
	.time {
		margin-top: 10upx;
		color: #666;
		font-size: 16upx;
	}
	
	.conponType {
		font-size: 20upx;
		color: #666;
	}
	
	.arrow {
		width: 18upx;
		height: 18upx;
		margin-right: 48upx;
	}
	
	.conponType1 {
		color: #666;
		font-size: 22upx;
		padding: 4upx 20upx 8upx;
		background-color: #FFDD56;
		border-radius: 0 0 28upx 28upx;
	}
	
	.button {
		width: 180upx;
		height: 56upx;
		line-height: 56upx;
		background: linear-gradient(0deg,#F83C57 0%, #FFBC83 100%);
		border-radius: 28upx;
		margin-top: 30upx;
		text-align: center;
		font-size: 24upx;
		color: #FFFDC2;
	}
	
	.descWrap {
		display: flex;
		background-color: #FCFCFC;
		padding: 40upx 20upx 30upx;
		position: relative;
		top: -23upx;
		z-index: -1;
	}
	
	.descTitle {
		display: inline-block;
		font-size: 20upx;
		color: #666;
		width: 150upx;
		text-align: right;
	}
	
	.descContent {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: 10upx;
	}
	
	
	.desc1 {
		font-size: 20upx;
		color: #666;
	}
	
	.desc2 {
		font-size: 20upx;
		color: #12B9A3;
	}
	
	.desc-item {
		margin-top: 18upx;
	}
	
	.examples {
		font-size: 24upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		text-align: left;
		color: #ec4863;
		margin-top: upx;
		border: none;
	}
	
	 button::after{ 
	    border: none; 
	}
	
	.statusWrap {
		margin-top: 12upx;
		width: 112upx;
		height: 112upx;
		border: 1upx dashed #b0b0b0;
		border-radius: 56upx;
		font-size: 18upx;
		color: #A4A4A4;
		letter-spacing: 2upx;
		line-height: 112upx;
		align-self: center;
		text-align: center;
		font-weight: bold;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
	}
	
	.qrcode{
		width: 375upx;
		height: 375upx;
		margin-top: 100upx;
	}
	
	.qrcode_pop{
		width: 415upx;
		height: 415upx;
		margin-top: 60upx;
	}
	
	.codeBg {
		width: 650upx;
		height: 700upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
